:root {
    --greyLight-1: #E4EBF8;
    --greyLight-2: #c8d0e7;
    --greyDark: #9ba3b8;
    --white: #ffffff;
    --darkorange: rgb(255, 153, 0);
}

body {
    color: #333333;
    font-size: 16px;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    font-family: "Microsoft Yahei Light", "Microsoft Yahei", PingFangSC-Regular, Helvetica, sans-serif;
    line-height: 1.80857;
    background-color: var(--greyLight-1);
    letter-spacing: 0.1em;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

a,
a:hover {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

p,
label {
    margin: 0;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
    overflow-y: scroll;
    background: var(--greyLight-1);
}

@media screen and (min-width: 900px) {
    html {
        font-size: 75%;
    }
}

.components {
    width: 75rem;
    height: 40rem;
    border-radius: 3rem;
    box-shadow: 0.8rem 0.8rem 1.4rem var(--greyLight-2), -0.2rem -0.2rem 1.8rem var(--white);
    padding: 4rem;
    display: grid;
    grid-template-columns: 17.6rem 19rem 20.4rem;
    grid-template-rows: repeat(autofit, -webkit-min-content);
    grid-template-rows: repeat(autofit, min-content);
    grid-column-gap: 5rem;
    grid-row-gap: 2.5rem;
    align-items: center;
}


/* 选项 */

.header {
    margin-top: 25px;
    margin-bottom: 15px;
}

.header .show {
    height: 65px;
    line-height: 58px;
    text-align: center;
}

.header .show .find_num {
    display: inline-block;
    border-radius: 20px;
    color: var(--darkorange);
    font-size: 66px;
}

.header .pause {
    float: right;
    grid-column: 3/4;
    grid-row: 1/2;
    width: 17.6rem;
    height: 4rem;
    line-height: 4rem;
    color: #555555;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
    border-radius: 1rem;
    text-align: center;
    cursor: pointer;
}

.header .pause:active {
    color: var(--darkorange);
    box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
}

.header .win {
    position: absolute;
    top: 66px;
    text-align: center;
    border-radius: 20px;
    color: var(--darkorange);
    font-size: 66px;
    left: 50%;
    width: 1000px;
    margin-left: -500px;
}

.segmented-control {
    grid-column: 3/4;
    grid-row: 1/2;
    width: 17.6rem;
    height: 4rem;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    position: relative;
}

.segmented-control input {
    display: none;
}

.segmented-control>input:checked+label {
    transition: all 0.5s ease;
    color: var(--darkorange);
}

.segmented-control__1,
.segmented-control__2 {
    width: 8.8rem;
    height: 3.6rem;
    font-size: 1.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--greyDark);
    transition: all 0.5s ease;
}

.segmented-control__color {
    position: absolute;
    height: 3.4rem;
    width: 8.2rem;
    margin-left: 0.3rem;
    border-radius: 0.8rem;
    box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
    pointer-events: none;
}

#tab-1:checked~.segmented-control__color {
    transform: translateX(0);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#tab-2:checked~.segmented-control__color {
    transform: translateX(8.8rem);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}


/* 游戏 */

.game {
    padding: 50px 0;
    border-radius: 1em;
    box-shadow: .3rem .3rem .6rem var(--greyLight-2), -.2rem -.2rem .5rem var(--white);
}

.game .num {
    width: 50px;
    height: 50px;
    margin: 10px;
    text-align: center;
    line-height: 50px;
    border-radius: 50px;
    box-shadow: .15rem .15rem .25rem var(--greyLight-2), -.15rem -.15rem .25rem var(--white);
    cursor: pointer;
}

.game .num.master:active {
    color: var(--darkorange);
    box-shadow: inset .15rem .15rem .25rem var(--greyLight-2), inset -.15rem -.15rem .3rem #fff;
}

img.like-img {
    height: 50px;
    width: auto;
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -25px;
}

.like-wrapper {
    position: absolute;
    bottom: -10%;
    left: 50%;
    margin-left: 72px;
}

.like {
    color: #888888;
    letter-spacing: 0;
    font-size: 14px;
}

.like-img-loaded {
    position: absolute;
    display: none;
}


/* 页脚 */

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links a {
    color: #777;
    text-decoration: none !important;
    outline: none !important;
}

.footer-links a:hover {
    color: darkorange !important;
}

.copyrights {
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font-size: 14px;
    color: #999;
    padding: 25px 0 !important;
    overflow: hidden;
}
@media (max-width: 767px) {
    .col-md-1 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media only screen and (min-width: 280px) and (max-width: 599px) {
    .col-md-1 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}